<template>
  <Card size="small" class="share-card">
    <template #extra>
      <Button type="primary" shape="round" @click="edit()"><PlusOutlined /> 添加</Button>
    </template>
    <Table :columns="columns" :scroll="{ x: 800, y: contentHeight - 40 }" @resizeColumn="resizeColumn" :pagination="false" :data-source="configs" size="small" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key == 'op'">
          <div class="btn-group">
            <Button type="primary" @click="edit(record)"><EditOutlined /> 修改</Button>
            <Button type="primary" @click="remove(record)" danger><DeleteOutlined /> 删除</Button>
          </div>
        </template>
      </template>
    </Table>
  </Card>
  <Modal v-model:visible="showModal" @ok="save" :mask-closable="false" :centered="true" :width="720" :model="currentConfig" title="配置详情">
    <Form layout="horizontal" :label-col="{ style: { width: '140px' } }">
      <Form.Item label="分类">
        <Input v-model:value="currentConfig.category" :disabled="!!currentConfig.id" placeholder="分类名称" />
      </Form.Item>
      <Form.Item label="Git分支获取命令">
        <Input v-model:value="currentConfig.gitBranch" placeholder="git分支拉取命令" />
      </Form.Item>
      <Form.Item label="生成本地镜像命令">
        <Input v-model:value="currentConfig.buildCommand" placeholder="生成本地镜像命令" />
      </Form.Item>
      <Form.Item label="发布上线命令">
        <Input v-model:value="currentConfig.onlineCommand" placeholder="发布上线命令" />
      </Form.Item>
      <Form.Item label="获取本地版本命令">
        <Input.TextArea v-model:value="currentConfig.getBuildVersions" :auto-size="{ minRows: 4 }" placeholder="获取本地版本命令" />
      </Form.Item>
      <Form.Item label="获取已上线版本命令">
        <Input.TextArea v-model:value="currentConfig.getOnlineVersions" :auto-size="{ minRows: 4 }" placeholder="获取已上线版本命令" />
      </Form.Item>
      <Form.Item label="Harbor镜像库地址">
        <Input v-model:value="currentConfig.harborRepositoryUrl" placeholder="Harbor镜像库地址" />
      </Form.Item>
    </Form>
  </Modal>
</template>
<script setup>
  import { ref, inject, reactive, toRaw, onMounted } from 'vue';
  import { Button, Card, Modal, Input, Form, Table } from 'ant-design-vue';
  import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  const $http = inject('$http');
  const $modal = inject('$modal');
  const $message = inject('$message');

  const showModal = ref(false);
  const contentHeight = ref(400);
  const configs = ref([]);
  const currentConfig = reactive({});

  const columns = reactive([
    {
      title: '序号',
      width: 40,
      align: 'center',
      customRender: ({ record, index }) => {
        return index + 1;
      }
    },
    { title: '分类', width: 100, dataIndex: 'Category', ellipsis: true, resizable: true },
    { title: 'Git分支获取命令', width: 100, dataIndex: 'GitBranch', ellipsis: true, resizable: true },
    { title: '生成本地镜像命令', width: 100, dataIndex: 'BuildCommand', ellipsis: true, resizable: true },
    { title: '发布上线命令', width: 100, dataIndex: 'OnlineCommand', ellipsis: true, resizable: true },
    { title: '获取本地版本命令', width: 100, dataIndex: 'GetBuildVersions', ellipsis: true, resizable: true },
    { title: '获取已上线版本命令', width: 100, dataIndex: 'GetOnlineVersions', ellipsis: true, resizable: true },
    { title: 'Harbor镜像库地址', width: 100, dataIndex: 'HarborRepositoryUrl', ellipsis: true, resizable: true },
    { width: 120, key: 'op', fixed: 'right' }
  ]);

  function resizeColumn(w, col) {
    col.width = w;
  }

  function getConfigs() {
    $http.get('/api/publish/configs').then(res => {
      configs.value = res.datas;
    });
  }

  function edit(record) {
    showModal.value = true;

    let val = record || {};

    currentConfig.id = val.Id;
    currentConfig.category = val.Category;
    currentConfig.gitBranch = val.GitBranch;
    currentConfig.buildCommand = val.BuildCommand;
    currentConfig.onlineCommand = val.OnlineCommand;
    currentConfig.getBuildVersions = val.GetBuildVersions;
    currentConfig.getOnlineVersions = val.GetOnlineVersions;
    currentConfig.harborRepositoryUrl = val.HarborRepositoryUrl;
  }

  function save() {
    $http.post('/api/publish/save', toRaw(currentConfig)).then(res => {
      if (res.success) {
        showModal.value = false;

        getConfigs();

        return;
      }

      $message.error('出现错误，' + res.message);
    });
  }

  function remove(record) {
    $modal.confirm({
      title: '警告',
      content: `是否确定删除分类为【${record.Category}】的配置项？`,
      onOk() {
        $http.delete(`/api/publish/${record.Id}`).then(res => {
          if (res.success) {
            showModal.value = false;

            setTimeout(getConfigs(), 300);

            return;
          }

          $message.error('出现错误，' + res.message);
        });
      }
    });
  }

  onMounted(() => {
    getConfigs();
  });
</script>
<style lang="less" scoped></style>
